<!DOCTYPE html>
<html>

	<head>
		<meta charset="utf-8" />
		<title></title>
		<script src="js/jquery-2.1.0.js" type="text/javascript" charset="utf-8"></script>
	</head>
	<style type="text/css">
		* {
			margin: 0;
			padding: 0;
		}
		li {
			list-style: none;
		}
		div.mod-setting-profile {
			width: 720px;
			margin: 0 auto;
		}
		div.mod-setting-profile div.setting-profile-title {
			font-size: 20px;
			color: #999;
			line-height: 1;
			padding-bottom: 11px;
			border-bottom: solid 2px #f2f2f2;
		}
		div.passPortraitWrapper {
			margin-top: 10px;
		}
		div.pass-portrait-left {
			margin-top: 10px;
			padding-left: 20px;
			display: inline;
			float: left;
		}
		ul.pass-portrait-nav {
			border-bottom: 1px solid #e5e5e5;
			font-size: 14px;
			height: 36px;
			position: relative;
			width: 440px;
		}
		ul.pass-portrait-nav li {
			color: #666;
			list-style: none;
			background: #fff;
			border-bottom: 1px solid #e5e5e5;
			border-top: 3px solid #fff;
			cursor: pointer;
			height: 33px;
			line-height: 33px;
			text-align: center;
			width: 118px;
			float: left;
		}
		ul.pass-portrait-nav li.pass-portrait-current {
			border-bottom: 1px solid #fff;
			border-left: 1px solid #e5e5e5;
			border-right: 1px solid #e5e5e5;
			border-top: 3px solid #2e82ff;
			font-weight: bold;
		}
		p.pass-portrain-commonp {
			margin: 0;
			padding: 0 0 18px 0;
			color: #666;
			height: 40px;
			line-height: 40px;
			font-family: "SimSun";
			font-size: 12px;
		}
		div.pass-portrait-openimg {
			position: relative;
		}
		.pass-portrait input {
			color: #666;
			font-family: "SimSun";
			outline: none;
		}
		.pass-portrait-filebtn {
			background: none;
			border: none;
			background: url(img/setportrait_btn_da8845e1.png) left top;
			background-repeat: no-repeat;
			height: 38px;
			line-height: 38px;
			text-align: center;
			width: 130px;
			color: #666;
		}
		.pass-portrait-file {
			height: 38px;
			opacity: 0;
			filter: alpha(opacity=0);
			font-size: 30px;
			position: absolute;
			left: 0;
			top: 0;
			width: 130px;
			color: #666;
		}
		.pass-portrait-filebtn-hover {
			background-position: 0 -75px;
		}
		span.pass-portrait-msg {
			color: #999;
			display: inline-block;
			text-align: left;
			font-family: "SimSun";
			font-size: 12px;
		}
		.pass-portrait-right {
			border-left: 1px solid #e5e5e5;
			float: right;
			height: 390px;
			margin-left: 20px;
			padding-left: 36px;
			width: 180px;
		}
		.pass-portrait-save {
			margin-top: 100px;
		}
		input.pass-portrait-savebtn {
			background: none;
			border: none;
			background: url(img/setportrait_btn_da8845e1.png);
			background-repeat: no-repeat;
			background-position: 0 -150px;
			cursor: pointer;
			height: 38px;
			line-height: 38px;
			text-align: center;
			width: 130px;
			color: white;
			font-family: "SimSun";
			outline: none;
			font-weight: 700;
		}
		.pass-portrait-recommend li {
		    cursor: pointer;
		    float: left;
		    height: 51px;
		    margin-right: 10px;
		    text-align: center;
		    width: 51px;
		}
		.pass-portrait-recommend li img {
		    height: 50px;
		    width: 50px;
		}
		.recommendSpan {
		    background: url(img/curhot_f1b2ec3c.png);
		    display: inline-block;
		    height: 51px;
		    width: 51px;
		    position: relative;
		    top: -54px;
		    zoom: 1;
		    visibility: hidden;
		}
	</style>
	<script type="text/javascript">
		$(function() {
			$(".pass-portrait-clearfix li").click(function(){
				$(this).parent().find('span.recommendSpan').css('visibility','hidden');
				$('.recommendSpan',$(this)).css("visibility","visible");
			});
		});
	</script>

	<body>
		<div class="mod-setting-profile">
			<div class="setting-profile-title">头像设置</div>
			<div class="profile-new-portrait">
				<div class="passPortraitWrapper">
					<ul class="pass-portrait-nav">
						<li class="pass-portrait-current" id="portraitCustomLi"><span>自定义头像</span></li>
						<!--<li class="pass-portrait-navright" id="portraitHotrecomLi"><span></span></li>-->
					</ul>
					<div class="pass-portrait-content pass-portrait-clearfix">
						<div class="pass-portrait-left">
							<p class="pass-portrain-commonp">方法一：选择本地照片，上传编辑自己的头像</p>
							<div class="pass-portrait-openimg">
								<input type="button" class="pass-portrait-filebtn" value="选择图片" />
								<input type="file" class="pass-portrait-file" name="file" onmouseleave="$('.pass-portrait-filebtn').removeClass('pass-portrait-filebtn-hover')" accept="image/jpeg,image/png,image/jpg,image/bmp" onmouseenter="$('.pass-portrait-filebtn').addClass('pass-portrait-filebtn-hover')"
								class="pass-portrait-file" name="file" id="fileImg"><span class="pass-portrait-msg">支持jpg、jpeg、gif、png、bmp格式的图片</span>
							</div>
							<p class="pass-portrain-commonp" style="margin-top:30px;">方法二：选择百度推荐头像，快速上传优质头像</p>
							<ul class="pass-portrait-recommend pass-portrait-clearfix" id="passPortraitRecommend" data-hotpor="undefined">
								<li id="recom-wildkid-1"><img src="img/h/1.jpg" data-serie="wildkid" data-num="1"><span class="recommendSpan"></span></li>
								<li id="recom-wildkid-2"><img src="img/h/2.jpg" data-serie="wildkid" data-num="2"><span class="recommendSpan"></span></li>
								<li id="recom-wildkid-3"><img src="img/h/3.jpg" data-serie="wildkid" data-num="3"><span class="recommendSpan"></span></li>
								<li id="recom-wildkid-4"><img src="img/h/4.jpg" data-serie="wildkid" data-num="4"><span class="recommendSpan"></span></li>
								<li id="recom-wildkid-5"><img src="img/h/5.jpg" data-serie="wildkid" data-num="5"><span class="recommendSpan"></span></li>
							</ul>
							<div class="pass-portrait-save">
								<input type="button" value="保存头像" class="pass-portrait-savebtn" id="savePortrait">&nbsp;
							</div>
						</div>
						<div class="pass-portrait-right">
							<p class="pass-portrain-commonp" style="font-size: 18px;">头像预览</p>
							<p id="previewBoxBig" class="pass-portrait-previewboxbig"><img src="http://himg.bdimg.com/sys/portrait/item/25bd3135323738313531343634961f" class="pass-portrait-previewbig" id="previewImgBig"></p>
							<p class="pass-portrain-commonp"><span>大头像100*100</span></p>
						</div>
					</div>
				</div>
			</div>
		</div>
	</body>

</html>